<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .center {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -200px;
            margin-left: -300px;
            border: 1px solid skyblue;
        }
        
        .mask {
            display: none;
            position: absolute;
            width: 800px;
            height: 480px;
            background: rgba(0, 0, 0, 0.3) url(../media_resourcing/cat_face.jpg) no-repeat center;
        }
        
        .center:hover .mask {
            /* 鼠标的hover事件触发显示遮罩层图片 */
            display: block;
            /* 恢复display:none隐藏的遮罩层,使用display:block来回复显示 */
        }
    </style>
</head>

<body>
    <div class="center">
        <div class="mask">

        </div>
        <img src="../media_resourcing/i_miss_you_so_much.png" width="800px" height="480px" alt="┭┮﹏┭┮">
    </div>
</body>

</html>